import React, { useState, useEffect } from 'react'
import Table from './Table/OwnTable'
import * as config from './config'
import './App.css'

function App() {
  // loading ： Loading 动画
  var [loading, setLoading] = useState(true)


  // callbackTableData() : 点击表格操作列拿到对应的整条数据
  const callbackTableData = (recoped) => {
    // console.log(recoped);
  }

  const [pagination, setPagination] = useState(
    {
      pageDataNumber: config.getColumsData().length,
      // total: 88,
      hideOnSinglePage: false, // 只有一页时，显示分页器

      // pageOnChange() : 分页变化时触发的函数
      // pages : 当前第 Number（页）
      // pageNumber : 当前页有 Number（个数据）
      pageOnChange(pages, pageNumber) {
        // console.log(pages);
        // console.log(pageNumber);
      }
    }
  )

  const [storecheckbox, setStorecheckbox] = useState([])

  const [rowSelection, setRowSelection] = useState(
    // onChange() : 选中复选框的事件
    // checkboxIndex : 选中的数据 id | key 值
    // checkboxRecord ： 选中的整条数据（以数组对象呈现）
    {
      type: 'checkbox',
      onChange(checkboxIndex, checkboxRecord) {

        setStorecheckbox(storecheckbox.push(...checkboxIndex))

        console.log('加进来的', storecheckbox);
        // console.log(checkboxIndex);
        // console.log(checkboxRecord);
      },
    }
  )


  return (
    <div className="App">
      <div className='table'>
        <Table
          bordered
          size='large'
          // loading={loading}
          scroll={{ x: 'max-content' }}
          columns={config.getColumsTable(callbackTableData)}
          value={config.getColumsData()}
          pagination={pagination} // 分页
          rowSelection={rowSelection} // 复选框
        />
      </div>
    </div>
  );
}

export default App;
